/*
 * @Description: 增加、编辑排序字段表单组件
 * @Author: Rfan
 * @Date: 2022-06-11 09:59:07
 * @LastEditTime: 2022-06-11 15:17:09
 */

import { Button, DatePicker, Form, Input, Select, Space } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import JPDatePicker from '@/components/JPComponents/JPDatePicker';

const { Option } = Select;

const logTypeList = ['add', 'update', 'fixed', 'delete'];

interface IFormItem {}

const ChangeLogFormItem = (props: IFormItem) => {
  return (
    <>
      <Form.Item
        name="updateVersion"
        label="版本号"
        rules={[{ required: true, message: '请填写字段名称' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="updateTime"
        label="更新时间"
        rules={[{ required: true, message: '请选择时间' }]}
      >
        <JPDatePicker placeholder="请选择更新时间" valueFormat="YYYY-MM-DD 00:00:00" />
      </Form.Item>
      <Form.List name="updateInfoList">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }) => (
              <Space key={key} align="baseline">
                <Form.Item
                  {...restField}
                  name={[name, 'logType']}
                  label="类型"
                  rules={[{ required: true, message: '请选择类型' }]}
                >
                  <Select style={{ width: 140 }}>
                    {logTypeList.map((type: string) => (
                      <Option key={type} value={type}>
                        {type}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
                <Form.Item
                  {...restField}
                  name={[name, 'logInfo']}
                  label="更新内容"
                  rules={[{ required: true, message: 'Missing last name' }]}
                >
                  <Input.TextArea placeholder="请输入更新内容" style={{ width: 260 }} />
                </Form.Item>
                <MinusCircleOutlined onClick={() => remove(name)} />
              </Space>
            ))}
            <Form.Item label={` `} colon={false}>
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                增加
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
      <Form.Item name="remark" label="备注">
        <Input.TextArea placeholder="" showCount maxLength={2000} />
      </Form.Item>
    </>
  );
};

export default ChangeLogFormItem;
